<template>
  <div class="handl_box">
    <!-- 头部返回 -->
    <div class="header_box">
      <span @click="goHome">
        <img
          class="imgOne"
          src="~@/assets/duZhongTai/left_icon.png"
          alt=""
          srcset=""
        />
      </span>
      <span class="title">历史记录</span>
      <span style="margin-top: -5px">
        <!-- <img
          class="imgTwo"
          src="~@/assets/duZhongTai/more.png"
          alt=""
          srcset=""
        /> -->
        <!-- <van-button type="info" size="mini">历史记录</van-button> -->
      </span>
    </div>
    <!-- 图片 -->
    <div class="box_img">
      <img src="../../../assets/homeNew/fuwu_yujing.jpg" alt="" srcset="" />
    </div>
    <div class="box_content">
      <div class="c_box">
        <van-form @submit="onSubmit">
          <!-- :rules="[{ required: true, message: '请填写用户名' }]" -->
          <van-field
            v-model="handlFrom.questionReason"
            name="questionReason"
            label="问题原因"
            placeholder="请输入问题原因"
            rows="2"
            type="textarea"
            :disabled="handlFrom.isReceipt == null ? false : true"
          />
          <van-field
            v-model="handlFrom.emergencyMeasures"
            name="emergencyMeasures"
            label="应急措施"
            placeholder="请输入应急措施"
            rows="2"
            type="textarea"
            :disabled="handlFrom.isReceipt == null  ? false : true"
          />
          <van-field
            v-model="handlFrom.rectificationMeasures"
            name="rectificationMeasures"
            label="整改措施"
            placeholder="请输入整改措施"
            rows="2"
            type="textarea"
            :disabled="handlFrom.isReceipt == null  ? false : true"
          />
          <van-field
            readonly
            clickable
            name="expectedTime"
            :value="handlFrom.expectedTime"
            label="预计完成时间"
            placeholder="选择日期"
            @click="handelShow"
          />
          <van-calendar v-model="show" @confirm="onConfirm" />
          <div style="margin: 16px">
            <van-button
              round
              block
              type="info"
              native-type="submit"
              :disabled="handlFrom.isReceipt == null ? false : true"
              >回 单</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Field } from "vant";
import { Form } from "vant";
import { Popup } from "vant";
import { Divider } from "vant";

Vue.use(Divider);
Vue.use(Popup);
Vue.use(Form);
Vue.use(Field);
import { Calendar } from "vant";
import { Toast } from "vant";
Vue.use(Calendar);
Vue.use(Toast);
export default {
  data() {
    return {
      handlFrom: {
        questionReason: "", //问题原因
        emergencyMeasures: "", //应急措施
        rectificationMeasures: "", //整改措施
        logId: "",
        expectedTime: "", //预计完成时间
        expectedTimeTwo: "",
        staffAccount:"",//工号
        isReceipt:null,
      },
      dataList: [], //获取到的数据
      falg: null, //判断是否可以回单
      show: false, //时间框显隐
      strString: null,
      ruleForm: {
        // questionReason: [
        //   { required: true, message: "请输入问题原因", trigger: "blur" },
        // ],
      },
      historyObj:{},//
    };
  },
  watch: {},
  activated() {
    console.log("------------",this.$route.params.item);
    this.historyObj = this.$route.params.item;
    if (this.historyObj.htmlUrl) {
        console.log("123");
        this.getUrl(this.historyObj.htmlUrl);
    }
  },
  created() {
    // this.getUrl();
  },
  mounted() {
    
  },
  methods: {
    //获取URL地址
    getUrl(htmlUrl) {
    //   let srt = `http://192.168.2.17:8500/#/handleHtml?logId=1558192&staffAccount=H8611237`;
    console.log("htmlUrl====",htmlUrl);
      let srt = htmlUrl;
      // let srt = window.location.href;
      this.strString = srt;
      var reg = srt.substring(srt.indexOf("?") + 1, srt.length).split("&");
      this.falg = null;
      console.log("reg==", reg);
      reg.forEach((item) => {
        let data = item.split("=");
        let x = data[0];
        console.info("地址栏", x);
        if (x == "logId") {
          this.handlFrom.logId = data[1];
          this.getSelect(this.handlFrom.logId);
        }
        if (x == "staffAccount") {
          this.handlFrom.staffAccount = data[1];
        }
      });
      console.log("logId=", this.handlFrom.logId);
      console.log("staffAccount=", this.handlFrom.staffAccount);
    },
    //获取回单返回的数据
    getSelect(logId) {
      this.$http({
        url: this.$http.adornUrl("/CpcpDuSpgl/select"),
        method: "get",
        params: this.$http.adornParams({
          logId: logId,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("data===", data.data);
        //   if (data.data == false) {
        //     console.log("空数组");
        //     this.falg = 1;
        //   } else {
        //     console.log("不是空数组");
        //     this.falg = 0;
        //   }
          console.log("data===", data.data[0]);
          this.dataList = data.data;
          console.log("this.dataList==", this.dataList);
          this.handlFrom = Object.assign(this.handlFrom, data.data[0]);
          console.log("this.handlFrom===",this.handlFrom);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //判断时间控件能不能点开
    handelShow() {
      console.log("handlFrom==", this.handlFrom);
      if (this.handlFrom.isReceipt != null) {
        this.show = false;
      } else {
        this.show = true;
      }
      // this.show = true;
    },
    //格式换选择的时间
    formatDate(date) {
      console.log("data==", date);
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    //时间控件 确定按钮
    onConfirm(date) {
      this.show = false;
      this.handlFrom.expectedTime = this.formatDate(date);
    },
    //回单
    onSubmit(values) {
      console.log("submit", values);
      console.log("-----", this.handlFrom);
      if (
        this.handlFrom.questionReason == "" ||
        this.handlFrom.emergencyMeasures == "" ||
        this.handlFrom.rectificationMeasures == "" ||
        this.handlFrom.expectedTime == "" || 
        this.handlFrom.expectedTime == null
      ) {
        Toast.fail("请填写完整信息");
      } else {
        console.log("123");
        // Toast.success("成功");
        // return;
        const {
          questionReason,
          emergencyMeasures,
          rectificationMeasures,
          logId,
          expectedTime,
          expectedTimeTwo,
        } = this.handlFrom;
        this.$http({
          url: this.$http.adornUrl("/CpcpDuSpgl/insert"),
          method: "post",
          data: this.$http.adornData({
            questionReason,
            emergencyMeasures,
            rectificationMeasures,
            logId,
            expectedTime,
            expectedTimeTwo,
            id:this.handlFrom.id
          }),
        }).then(({ data }) => {
          if (data && data.code === 0) {
            Toast.success("回单成功");
            setTimeout(() => {
              this.$router.back(-1);
            }, 1500);
          } else {
            Toast.fail(data.msg);
          }
        });
      }
    },
    //返回
    goHome() {
      this.$router.go(-1); // 返回上一页
    },
  },
};
</script>

<style scoped>
.handl_box {
  width: 100%;
  /* height: 100vh; */
  /* border: 1px solid red; */
  position: relative;
}
.box_img {
  width: 100%;
}
.box_img img {
  width: 100%;
}
.box_content {
  width: 100%;
  /* height: 80vh; */
  /* border: 1px solid rgb(119, 0, 255); */
  margin-top: 15px;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.c_box {
  width: 93%;
  border-radius: 10px;
  text-align: center;
  border: 1px solid rgb(227, 227, 227);
  overflow: hidden;
}
.b_c {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 15px 0;
  padding: 0px 5px 10px 10px;
  border-bottom: 1px solid rgb(227, 227, 227);
}
.c_box > div:last-child {
  border-bottom: 1px solid #fff;
}
.c_box .b_c_last {
  border-bottom: 1px solid #fff !important;
  margin-bottom: 0px;
}
.b_c div:first-child {
  color: #000;
  font-weight: bolder;
}
.handle_sub {
  /* width: 100%;
  text-align: center;
  position: fixed;
  bottom: 10px;
  left: auto; */
  bottom: 0px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  line-height: 3.125rem;
  width: 100%;
  background: #fff;
  text-align: center;
}
.b-button {
  width: 200px;
}
.handl_box /deep/ .el-textarea__inner {
  border: 1px solid #dcdfe6;
  color: #000;
}
.handl_box .van-cell {
  /* padding: 0px 15px 10px 0px; */
  /* text-align: left; */
  align-items: flex-end !important;
}
.handl_box .van-cell__value {
  border-bottom: 1px solid #dcdfe6;
  color: #000;
  width: 68%;
  text-align: left;
  padding-left: 10px;
}
.handl_box .van-cell__title,
.van-cell__value {
  -webkit-box-flex: none;
  -webkit-flex: none;
  flex: none;
}
.handl_box .van-cell__title {
  width: 32%;
}
.handl_box .van-cell::after {
  border-bottom: none;
}
.handl_box /deep/ .el-textarea.is-disabled .el-textarea__inner {
  box-shadow: 0px 0px 7px 5px #dcdfe6 !important;
  -webkit-box-shadow: 0px 0px 0px 0px #dcdfe6 !important;
}
.handl_box /deep/ .el-input__inner {
  border: 1px solid #dcdfe6;
  color: #000;
  box-shadow: 0px 0px 7px 5px #dcdfe6 !important;
  -webkit-box-shadow: 0px 0px 0px 0px #dcdfe6 !important;
}
.header_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 2.5rem;
  line-height: 2.5rem;
  border-bottom: 1px solid #e5e5e5;
  padding: 0 10px;
}
.header_box .title {
  font-size: 1.25rem;
}
.header_box .imgOne {
  /* width: 25px; */
  height: 1.5625rem;
}
.header_box .imgTwo {
  width: 40px;
  /* height: 25px; */
}
.handl_box /deep/ .el-form-item__label {
  color: #000 !important;
}
.handl_box /deep/ .van-field__label {
  color: #000;
  text-align: right;
  font-weight: bolder;
}
.handl_box /deep/ .van-field__value {
  border: 1px solid gainsboro;
}
.handl_box /deep/ .van-field__control {
  padding: 5px;
}
.handl_box /deep/ .van-button--block {
  width: 50%;
  margin-left: 50%;
  transform: translateX(-50%);
}
/* .noticeWidth {
  width: 120px !important;
} */
.handl_box /deep/ .van-popup--center {
  /* width: 93%; */
  width: 90%;
  height: 90%;
  padding: 5px;
  border-radius: 10px;
}
.handl_box /deep/ .van-divider {
  margin: 0px;
  border-color: #b9b9b9;
}
.handl_box /deep/ .van-popup__close-icon--top-right {
  top: 9px;
}
.history_box {
  width: 100%;
  /* border: 1px solid red; */
  /* display: flex;
  flex-wrap: wrap;
  justify-content: center; */
  /* height: 85%; */
  height: 93%;
  overflow-y: auto;
  padding-right: 8px;
}
.history_box > div {
  /* width: 96%; */
  /* margin-left: 10px; */
}
.history_card {
  border: 1px solid gainsboro;
  line-height: 30px;
  border-radius: 6px;
  margin: 8px 0px;
  padding: 4px 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.history_card > div{
  line-height: 1.25rem;
}
.history_card /deep/ .van-button--mini {
  height: 18px;
  line-height: 14px;
  padding: 6px 4px;
  font-size: 10px;
}
.history_card .go_search {
  float: right;
  margin-top: -0.4375rem;
}
.history_card .card_boxOne > span {
  width: 49%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history_card .card_boxOne .box_time{
  text-align: right;
}
.history_card .card_boxTwo > span {
  display: inline-block;
}
.history_card .card_boxTwo > span:first-child {
  /* border: 1px solid red; */
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.no_more {
  text-align: center;
  /* margin-top: 10px; */
  margin-top: 1.5625rem;
  margin-bottom: 1rem;
}
</style>